<template>
	<view class="page">
		<!-- 自定义头部 -->
		<BhTitle titleText="发布店铺"></BhTitle>
		<view class="container">
			<view class="data-container" v-if="listDatas.length > 0">
				<view class="item-container" v-for="(data, index) in listDatas" :key="index" @click="toPostDetailSell(data)">
					<view class="bh-row">
						<image class="item-img" :src="data.cover"></image>
						<view style="width: 380rpx;">
							<view class="item-title mb10 white-space1" style="width: 380rpx;">{{ data.area }}{{ data.industryName }}转让</view>
							<view class="item-address-area mb10 bh-row">
								<image src="../../static/images/address.png" mode="" class="address-img"></image>
								<view class="white-space1 c9" style="width: 360rpx;">
									{{ data.street }}•{{ data.address }}
								</view>

								<!-- <view class="lebal">{{data.able}}</view> -->
							</view>
							<view class="mb10" style="display: flex;flex-direction: row;">
								<view class="item-lebal f22" v-show="j < 3" v-for="(lebalItem, j) in data.labelDtoList" :key="j">
									{{ lebalItem.labelName }}
								</view>
							</view>

							<view class="item-price  bh-row">
								<view class="right-rent fw600 mr10 f24">租</view>
								<text class="f32 fw600 mr20" v-if="data.rent">{{ data.rent > 9999 ? (data.rent / 10000).toFixed(2) + '万/月' : data.rent + '元/月' }}</text>
								<text class="f32 fw600 mr20" v-else>面议</text>
								<view class="right-rent fw600 mr10 f24">转</view>
								<text class="f32 fw600" v-if="data.transferFee">{{ getSimpleAmount(data.transferFee) }}</text>
								<text class="f32 fw600" v-else>面议</text>
							</view>
						</view>
					</view>
					<view class="cccline"></view>
					<view class="operate">
						<view class="" style="font-weight: 700;" @click.stop="finish(data)">交易完成</view>
						<view class="" @click.stop="edit(data)">修改</view>
						<view class="" @click.stop="del(data)">删除</view>
					</view>
				</view>
				<showCustomModal></showCustomModal>
			</view>
			<view v-else style="margin-top: 20vh;">
				<bh-no-more></bh-no-more>
			</view>
			<view class="" style="height: 40rpx;"></view>
		</view>

	</view>
</template>

<script>
import { Api } from '../../api/api'
import { CustomDict } from '../../components/custom_views/custom_dict';
import { Dict } from '../../components/custom_views/dict';
import bhNoMore from '../../components/custom_views/bh-no-more.vue';
import check_utils from '../../components/custom_views/check_utils';
export default {
	components: {
		bhNoMore
	},
	mixins: [],
	data() {
		return {
			selections: ['区域', '面积', '租金', '更多'],
			listDatas: [],
			hisDatas: [],
		}
	},
	computed: {},
	methods: {
		finish(item) {
			let that = this
			this.showCustomModal({
				content: '确认交易完成',
				// cancelColor: '#FF6430',
				showCancel: true,
				cancelText: '取消',
				// confirmColor: '#666666',
				confirmText: '确定',
				success: function (res) {
					if (res.confirm) {
						console.log('点击了确定', res)
						Api.PostApi.updateByFinish(item.id, (res) => {
							if (res.code == 200) {
								check_utils.showCustToast('设置成功')
								Api.PostApi.addPostNumber(that, -1, item.id)
								that.listDatas = that.listDatas.filter(p => p.id != item.id)
								that.hideCustomModal()
							} else {
								check_utils.showCustToast(res.msg)
							}
						})
					} else if (res.cancel) {
						console.log('用户取消注销');
					}
				}
			})

		},
		initList(callback = ()=>{}) {
			let that = this
			Api.MyApi.listOfMy(that, (res) => {

				//页面弄filters不生效 就这么循环加进去了
				if (res.data.records) {

					that.listDatas = res.data.records.filter((item) => { return item.postType == 120102 })
					for (var i = 0; i < that.listDatas.length; i++) {
						that.listDatas[i].industryName = CustomDict.getDictName(that.listDatas[i].industryId, Dict.IndustryTypeEnum)
						that.listDatas[i].cover = that.listDatas[i].facadePicture.split(',')[0]
					}
					callback()
				}else if(res.code != 200){
					check_utils.showCustToast(res.msg,)
					callback()
				}
			})

		},
		toPostDetailSell(item) {
			let detailJson = encodeURIComponent(JSON.stringify(item))
			uni.navigateTo({
				url: '/PostPage/post_detail_sell/post_detail_sell?detailJson=' + detailJson + '&postId=' + item.id
			})
		},
		edit(item) {
			Api.PostSellApi.postHis(item.id, (res) => {
				if (res.code == 200) {
					console.log('历史记录', res.data)
					// let aa = []
					// aa.some
					let exist = res.data.some(p => p.postStatus == Dict.PostStatusEnum.Init.value)
					if (exist) {
						check_utils.showCustToast('该发布正在审核中，请审核完成后，再重新编辑')
					} else {
						uni.navigateTo({
							url: '/PostPage/post_add_sell/post_add_sell?postId=' + item.id
						})
					}
				} else {
					check_utils.showCustToast(res.msg)
				}
			}, false)
			// uni.navigateTo({
			// 	url: '/pages/post_add_sell/post_add_sell?postId=' + item.id
			// })

		},
		del(item) {
			let that = this
			this.showCustomModal({
				title: '删除店铺',
				content: '删除后，不可恢复哦～',
				cancelColor: '#FF6430',
				showCancel: true,
				cancelText: '再想想',
				confirmColor: '#666666',
				confirmText: '确定',
				success: function (res) {
					if (res.confirm) {
						console.log('点击了确定', res)
						Api.PostApi.del(item.id, (res) => {
							if (res.code == 200) {
								check_utils.showCustToast('删除成功')
								Api.PostApi.addPostNumber(that, -1, item.id)
								that.listDatas = that.listDatas.filter(p => p.id != item.id)
								that.hideCustomModal()
							} else {
								check_utils.showCustToast(res.msg)
							}
						})
					} else if (res.cancel) {
						console.log('用户取消注销');
					}
				}
			})
			// uni.showModal({
			// 	title: '删除店铺',
			// 	content: '删除后，不可恢复哦～',
			// 	cancelColor: '#FF6430',
			// 	showCancel: true,
			// 	cancelText: '再想想',
			// 	confirmColor: '#666666',
			// 	confirmText: '确定',
			// 	success: function (res) {
			// 		if (res.confirm) {
			// 			console.log('点击了确定', res)
			// 			Api.PostApi.del(item.id, (res) => {
			// 				if (res.code == 200) {
			// 					check_utils.showCustToast('删除成功')
			// 					Api.PostApi.addPostNumber(that, -1)
			// 					that.listDatas = that.listDatas.filter(p => p.id != item.id)
			// 				} else {
			// 					check_utils.showCustToast(res.msg)
			// 				}
			// 			})
			// 		} else if (res.cancel) {
			// 			console.log('用户取消注销');
			// 		}
			// 	}
			// })
		}
	},
	watch: {},

	// 页面周期函数--监听页面加载
	onLoad() {
		this.initList()
	},
	onPullDownRefresh(){
		let that = this
		Api.MyApi.refreshListOfMy(that)
		that.initList(()=>{
			uni.stopPullDownRefresh()
		})
	},
	// 页面周期函数--监听页面初次渲染完成
	onReady() { },
	// 页面周期函数--监听页面显示(not-nvue)
	onShow() { },
	// 页面周期函数--监听页面隐藏
	onHide() { },
	// 页面周期函数--监听页面卸载
	onUnload() { },
	// 页面处理函数--监听用户下拉动作
	// onPullDownRefresh() { uni.stopPullDownRefresh(); },
	// 页面处理函数--监听用户上拉触底
	// onReachBottom() {},
	// 页面处理函数--监听页面滚动(not-nvue)
	// onPageScroll(event) {},
	// 页面处理函数--用户点击右上角分享
	// onShareAppMessage(options) {},
}
</script>

<style scoped lang="scss">
@import url(../../static/css/base.css);

.page {
	min-height: 100vh;
	background-color: #F5F9FA;
}

.container {

	width: 100%;

	.address-img {
		width: 20rpx;
		height: 22rpx;
		margin-right: 10rpx;
	}

	.msg {
		font-size: 24rpx;
		color: #F87147;
		padding: 0 32rpx;
		background-color: rgba(248, 113, 71, 0.1);
		height: 72rpx;
		line-height: 72rpx;
	}

	.redclose {
		width: 21rpx;
		height: 21rpx;
	}

	.right-rent {
		width: 34rpx;
		height: 34rpx;
		text-align: center;
		border-radius: 4rpx;
		box-sizing: border-box;
		border: 1px solid #F87147;
		font-size: 20rpx;
		color: #F87147;
		font-weight: 600;
	}
}


.btn-select-lebal {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	background: #ECF0F1;

	.btn-select {
		margin-right: 10rpx;

	}
}

.address_down.png {
	width: 24rpx;
	height: 24rpx;
}

.filter-container {
	display: flex;
	justify-content: space-between;
	padding-right: 20rpx;
	padding-left: 20rpx;
	font-size: smaller;
	margin-top: 30rpx
}

.data-container {
	padding: 0 32rpx;

	.cccline {
		height: 1rpx;
		border-top: 1rpx solid #eee;
		width: 582rpx;
		margin: 30rpx auto;
	}

	.operate {
		display: flex;

		>view {
			width: 50%;
			text-align: center;
			font-size: 24rpx;
			line-height: 40rpx;
			color: #666;

			&:first-child {
				border-right: 1rpx solid #eee;
			}
		}
	}

	.item-container {
		background: white;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
		box-sizing: border-box;
		padding: 32rpx;
	}

	.item-img {
		width: 220rpx;
		height: 192rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.item-title {
		font-size: 32rpx;
		font-weight: bolder;
	}

	.item-address-area {
		display: flex;
		font-size: 24rpx;

	}

	.item-lebal {
		padding: 8rpx 12rpx;
		font-size: 22rpx;
		font-weight: 600;
		background: #F5F6F6;
		margin-right: 10rpx;
		border-radius: 4rpx;
		color: #666;
		white-space: nowrap;
	}

	.item-price {
		color: red;
	}
}
</style>